Repository navigation
feat(data-grid): add file cell - #1021
Merged
Merged
Conversation
- Add FileCell component with drag & drop functionality - Support multiple file uploads with validation - Add file size and type restrictions (configurable) - Display file icons based on MIME types - Add file list with remove functionality - Update data-grid-demo with sample file attachments - Add file variant to cell type definitions - Add File icon to column header variants
- Add drag & drop directly on file cells (non-blocking) - Show skeleton loaders while files 'upload' - Display blue ring highlight when dragging over cell - Show 'Drop files here' indicator on empty cells - Distinguish between cell drops (show skeleton) and editor drops (instant) - Simulate 800ms upload delay (configurable for real uploads) - Keep users productive - no blocking editor popup
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new file cell variant to the data-grid component, enabling file upload and management functionality with drag-and-drop support, file type validation, and size limits.
Key Changes
- Introduced a new "file" cell variant with configurable options (maxFileSize, maxFiles, acceptedTypes)
- Implemented comprehensive file upload UI with drag-and-drop, file browsing, and visual feedback including skeleton loading states
- Added FileCell component with file validation, upload simulation, and management features (add, remove, clear all)
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/data-grid.ts | Added "file" variant type definition with configuration options for file size, count, and accepted types |
| src/components/data-grid/data-grid-demo.tsx | Added FileData interface, sample file data generation, and demo column configuration for attachments |
| src/components/data-grid/data-grid-column-header.tsx | Added FileIcon import and mapping for the file variant in column headers |
| src/components/data-grid/data-grid-cell.tsx | Integrated FileCell component into the cell rendering switch statement |
| src/components/data-grid/data-grid-cell-variants.tsx | Implemented complete FileCell component with upload, validation, drag-and-drop, and display logic; also contains unrelated CSS selector syntax bugs in ShortTextCell and MultiSelectCell |
| registry.json | Added skeleton UI component dependency |
| public/r/registry.json | Added skeleton UI component dependency |
| public/r/data-grid.json | Updated registry with FileCell implementation and component dependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
noodleman1991
pushed a commit
to noodleman1991/tablecn
that referenced
this pull request
Mar 12, 2026
* chore: sync * feat: add file cell component with multi-file upload support - Add FileCell component with drag & drop functionality - Support multiple file uploads with validation - Add file size and type restrictions (configurable) - Display file icons based on MIME types - Add file list with remove functionality - Update data-grid-demo with sample file attachments - Add file variant to cell type definitions - Add File icon to column header variants * feat: add direct cell drop with skeleton loader UX - Add drag & drop directly on file cells (non-blocking) - Show skeleton loaders while files 'upload' - Display blue ring highlight when dragging over cell - Show 'Drop files here' indicator on empty cells - Distinguish between cell drops (show skeleton) and editor drops (instant) - Simulate 800ms upload delay (configurable for real uploads) - Keep users productive - no blocking editor popup * feat: update file cell * feat: update focus ring for file cell * fix: prevent escape key from blurring file cell after popover closes * feat: update types * chore: remove badge trancation
anhdd-kuro
pushed a commit
to anhdd-kuro/tablecn
that referenced
this pull request
Apr 8, 2026
* chore: sync * feat: add file cell component with multi-file upload support - Add FileCell component with drag & drop functionality - Support multiple file uploads with validation - Add file size and type restrictions (configurable) - Display file icons based on MIME types - Add file list with remove functionality - Update data-grid-demo with sample file attachments - Add file variant to cell type definitions - Add File icon to column header variants * feat: add direct cell drop with skeleton loader UX - Add drag & drop directly on file cells (non-blocking) - Show skeleton loaders while files 'upload' - Display blue ring highlight when dragging over cell - Show 'Drop files here' indicator on empty cells - Distinguish between cell drops (show skeleton) and editor drops (instant) - Simulate 800ms upload delay (configurable for real uploads) - Keep users productive - no blocking editor popup * feat: update file cell * feat: update focus ring for file cell * fix: prevent escape key from blurring file cell after popover closes * feat: update types * chore: remove badge trancation
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.